
<template>
  <div>
    <el-row type="flex">
      <el-col :span="4" :style="{ height: heightTree }">
        <el-tree
          style="margin-left: 10px; margin-top: 20px"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col
        class="formWarp"
        :span="20"
        style="margin-left: 10px"
        :style="{ height: heightTree }"
      >
        <h2 style="text-align: center; font-size: 30px">
          大 组 工 网 网 络 安 全 管 理 制 度 备 案 表
        </h2>
        <div class="infohead">
          <p>填报单位:(盖章)<input v-model="fillingOrg" readonly class="inputVal"/></p>
          <p>填表人:<input v-model="fillingPerson" readonly class="inputVal" /></p>
          <p>联系方式:<input v-model="fillingTel" readonly class="inputVal" /></p>
        </div>
        <div :style="{ height: heightTable }" style="overflow-y: scroll;margin-top:10px;">
          <table border="1" class="myTable">
            <tr>
              <td colspan="2" style="text-align: left; font-size: 18px">
                大组工网网站安全管理制度建立情况
              </td>
            </tr>
            <tr>
              <td>管理制度</td>
              <td style="text-align: left">
                <el-checkbox-group
                  v-model="formQuery.managementSystem"
                  onclick="return false"
                >
                  <el-checkbox label="1">有</el-checkbox>
                  <el-checkbox label="0">暂无</el-checkbox>
                </el-checkbox-group>
                <el-link type="primary" @click="handleClick" v-if="flag">管理制度附件</el-link>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: left; font-size: 18px">
                制度包含主要内容
              </td>
            </tr>
            <tr>
              <td>网络运行安全</td>
              <td style="text-align: left">
                <el-checkbox-group
                  onclick="return false"
                  v-model="formQuery.netRunSafe"
                >
                  <el-checkbox label="1">有</el-checkbox>
                  <el-checkbox label="0">暂无</el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
            <tr>
              <td>网络信息安全</td>
              <td style="text-align: left">
                <el-checkbox-group
                  v-model="formQuery.netMessageSafe"
                  onclick="return false"
                >
                  <el-checkbox label="1">有</el-checkbox>
                  <el-checkbox label="0">暂无</el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
            <tr>
              <td>监测预警与应急处理</td>
              <td style="text-align: left">
                <el-checkbox-group
                  v-model="formQuery.warnDispose"
                  onclick="return false"
                >
                  <el-checkbox label="1">有</el-checkbox>
                  <el-checkbox label="0">暂无</el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
  import {getSystemList} from "@/api/datacentersg/personnelPut/personnelPut.js"
import store from "@/store";
import webapp from "@/config/webapp";
class Photo {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
export default {
  data() {
    return {
      fillingOrg:"",
      fillingPerson:"",
      fillingTel:"",
      formQuery: {
        managementSystem: [],
        netRunSafe: [],
        netMessageSafe: [],
        warnDispose: [],
        managementFile: "",
      },
      uploadUrl: webapp.uploadUrl,
      heightTree: window.innerHeight - 150 + "px",
      heightTable: window.innerHeight - 240 + "px",
      data: [
        {
          label: "山东省",
          children: [
            {
              label: "济南市",
            },
            {
              label: "青岛市",
            },
            {
              label: "淄博市",
            },
            {
              label: "枣庄市",
            },
            {
              label: "东营市",
            },
            {
              label: "烟台市",
            },
            {
              label: "潍坊市",
            },
            {
              label: "济宁市",
            },
            {
              label: "泰安市",
            },
            {
              label: "威海市",
            },
            {
              label: "日照市",
            },
            {
              label: "临沂市",
            },
            {
              label: "德州市",
            },
            {
              label: "聊城市",
            },
            {
              label: "滨州市",
            },
            {
              label: "菏泽市",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      fileMultiple: false,
      fileList: [],
      dataLabel:"",
      flag:false,
      dataList:[],
    };
  },
  created(){
    this.$watch('dataLabel', (newVal, oldVal) => {
    if (newVal) {
      this.getList();
    } else {
      this.$message({
        message: "请先选择机构",
        type: "warning",
      });
    }
  });
    this.$watch('formQuery.managementFile', (newVal, oldVal) => {
      if (newVal) {
        this.flag = true
      } else {
        this.flag = false
      }
    });
  },
  methods: {
    getList(){
        this.clear();
        const params = {
           userId:store.getters.user_id.toString(),
           token:store.getters.token.toString(),
           data:{
            organization:this.dataLabel,
           }
        }
        getSystemList(params).then((result) =>{
            if(result.result){
              this.dataList = result.resultdata;
              this.id = result.resultdata[0].id
              this.fillingOrg=result.resultdata[0].fillingOrg
              this.fillingPerson=result.resultdata[0].fillingPerson
              this.fillingTel=result.resultdata[0].fillingTel
              this.formQuery.managementSystem=[];
              this.formQuery.managementSystem.push(result.resultdata[0].managementSystem.toString());
              this.formQuery.netRunSafe= [];
              this.formQuery.netRunSafe.push(result.resultdata[0].netRunSafe.toString())
              this.formQuery.netMessageSafe= [];
              this.formQuery.netMessageSafe.push(result.resultdata[0].netMessageSafe.toString())
              this.formQuery.warnDispose= [];
              this.formQuery.warnDispose.push(result.resultdata[0].warnDispose.toString())
              this.formQuery.managementFile = result.resultdata[0].managementFile;
              const photoList = [];
              if (result.resultdata[0].managementFile) {
                photoList.push(new Photo("管理制度附件", result.resultdata[0].managementFile));
              } else {
                this.fileList = [];
              }
              this.fileList = photoList;
              }
         })
    },
    handleNodeClick(data) {
      this.dataLabel = data.label;
        // if(this.formQuery.managementFile == "" || this.dataList == []){
        //   this.flag = false;
        // }else{
        //   this.flag = true;
        // }
        // console.log(this.flag);
    },
    handleClick(){
      if(this.formQuery.managementFile !==""){
           window.open(this.formQuery.managementFile);
      }
    },
    clear(){
      this.fillingOrg=""
      this.fillingPerson=""
      this.fillingTel=""
      this.formQuery.managementSystem=[];
      this.formQuery.netRunSafe= [];
      this.formQuery.netMessageSafe= [];
      this.formQuery.warnDispose= [];
      this.formQuery.managementFile="";
    },
    handlePreview() {},
    uploadSuccess() {},
    before_upload() {},
  },
};
</script>
  
<style scoped>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp {
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
  /* margin-left:10px; */
}
.infohead{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.infohead p{
  font-size:18px;
}
.inputVal{
  border: none;
  border-bottom:1px solid #000;
  font-size:16px;
  font-weight: lighter;
}
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
}

.myTable tbody {
  width: 100%;
}
>>>.el-checkbox__label{
  font-size:16px;
}
.myTable td {
  word-wrap: break-word;
  font-size: 18px;
  padding: 15px 10px;
  text-align: center;
}
>>>.el-tree-node__label{
  font-size:16px;
}
</style>